<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Liuxw</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/vue-resource@1.5.1"></script>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/index.js"></script>
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
        table
        {
            border-left: none;
        }
        table th
        {
            border-left: none;
            border-right: none;
        }
        table td /*设置表格文字左右和上下居中对齐*/
        {
            vertical-align: middle;
            text-align: center;
            border-left: none;
            border-right: none;
        }

        /*设置新的table样式*/
        [v-cloak] {
            display: none;
        }

        button {
            margin-top: 6px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
        }

        table th {
            background: #f7f7f7;
            color: #5c6b77;
        }

        table th, table td {
            border: 1px solid #ddd;
            border-left: none;
            border-right: none;
        }

        table th a {
            display: inline-block;
            margin: 0 4px;
            cursor: pointer;
        }

        table th a.on {
            color: #3399ff;
        }

        table th a:hover {
            color: #3399ff;
        }
    </style>
</head>
<body  style="background:#303133; color: aliceblue">
<div id="app3" v-cloak>
    刷新时间：{{nowDate}}
</div>
<div id="app" style="display: none" v-cloak>
    <template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column
                    prop="symbol"
                    label="代码"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="名称"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="lastTrade"
                    label="最新价"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="change"
                    label="涨跌额"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="chg"
                    label="涨跌幅"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="dateTime"
                    label="最新行情时间"
                    align="center">
            </el-table-column>
        </el-table>
    </template>
</div>
<div id="app2" style="overflow-x: hidden;" v-cloak>
    <table border="1" cellspacing="0" cellpadding="0" width="100%">
        <thead>大盘指数</thead>
        <tr>
            <th>代码</th>
            <th>名称</th>
            <th>最新价</th>
            <th>涨跌额</th>
            <th>涨跌幅</th>
            <th>最新行情时间</th>
        </tr>
        <tr v-for="item in items">
            <td style="color: #05adff">{{item[1]}}</td>&nbsp; <!--代码-->
            <td>{{item[2]}}</td>&nbsp; <!--名称-->
            <td v-if="item[4] >= 0" style="color:red">{{item[3]}}</td>
            <td v-else style="color:#00FF00">{{item[3]}}</td>&nbsp; <!--最新价-->
            <td v-if="item[4] >= 0" style="color:red">{{item[4]}}</td>
            <td v-else style="color:#00FF00">{{item[4]}}</td>&nbsp; <!--涨跌额-->
            <td v-if="item[4] >= 0" style="color:red">{{item[5]}}</td>
            <td v-else style="color:#00FF00">{{item[5]}}</td>&nbsp; <!--涨跌幅-->
            <td>{{item[6]}}</td>&nbsp; <!--最新行情时间-->
        </tr>
    </table>
</div>
<div id="app4" style="overflow-x: hidden;" v-cloak>
    <table border="1" cellspacing="0" cellpadding="0" width="100%">
        <thead>我的基金</thead>
        <tr>
            <th>代码</th>
            <th>名称</th>
            <th>单位净值</th>
            <th>净值日期</th>
            <th>估算值</th>
            <th>估算值增率</th>
            <th>最新行情时间</th>
        </tr>
        <tr v-for="item in items">
            <td style="color: #05adff">{{item.fundcode}}</td>&nbsp; <!--代码-->
            <td>{{item.name}}</td>&nbsp; <!--名称-->
            <td>{{item.dwjz}}</td>&nbsp; <!--单位净值-->
            <td>{{item.jzrq}}</td>&nbsp; <!--净值日期-->
            <td v-if="item.gszzl >= 0" style="color:red">{{item.gsz}}</td>
            <td v-else style="color:#00FF00">{{item.gsz}}</td>&nbsp; <!--估算值-->
            <td v-if="item.gszzl >= 0" style="color:red">{{item.gszzl}}%</td>
            <td v-else style="color:#00FF00">{{item.gszzl}}%</td>&nbsp; <!--估算值增率-->
            <td>{{item.gztime}}</td>&nbsp; <!--最新行情时间-->
        </tr>
    </table>
</div>
<footer>
    <div id="app5">
        <iframe align="center" width="100%" src="fundFind.html"
                frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no">
        </iframe>
    </div>
</footer>

<script src="js/liuxw.js"></script>
</body>
</html>